<template>
	<view class="app-digit-integral" v-if="info">
		<image class="app-digit-integral__bg" src="/pages/digitIntegral/static/bg.png" mode="widthFix"></image>
		<view class="z-index-2">
			<view class="status_bar">
				
			</view>
			<view class="h-44">
				
			</view>
			<view class="e-flex e-p-l-16 h-44 fix-box">
				<image class="img-48" src="./static/back.png" mode="aspectFit" @tap="$back()"></image>
			</view>
			<view class="e-flex e-font-36 c-white e-m-t-30 e-p-l-20">吉信首发智能合约数字积分</view>
			<view class="e-p-t-120 e-p-l-20 e-m-b-10 c-white e-font-28">
				{{$t('digitIntegral.通证积分')}}
			</view>
			<view class="e-m-b-132 c-white fw-600 e-font-64 e-p-l-20">
				{{moneyAll || 0}}
			</view>
			<view class="e-flex e-p-l-20 e-p-r-20 e-m-b-50">
				<view class="e-p-20 e-radius-20 app-digit-integral__addrl e-flex">
					<view class="e-font-24 e-m-r-20" style="color: rgba(255,255,255,0.6);">
						通证
					</view>
					<view class="e-flex-1 e-line-1 c-white">
						{{info.userAddress || ''}}
					</view>
				</view>
			</view>
			<view class="e-p-l-20 e-flex e-m-b-30">
				<view class="app-digit-integral__yline e-m-r-28">
					
				</view>
				<view class="e-font-30 fw-500 c-white">
					{{$t('digitIntegral.合约信息')}}
				</view>
			</view>
			<view class="e-rela e-m-l-20 e-m-r-20 e-radius-20 e-m-b-20">
				<view class="app-digit-integral__panelbgbox">
					<image class="app-digit-integral__panelbg" src="./static/panel.png" mode=""></image>
				</view>
				<view class="z-index-2 e-p-l-20 e-p-r-20 e-p-t-20">
					<view class="e-flex e-m-b-60">
						<view class="e-flex-1 e-p-r-30">
							<view class="e-font-24 e-m-b-8" style="color: rgba(255,255,255,0.6);">
								{{$t('digitIntegral.合约地址')}}
							</view>
							<view class="c-white e-font-24 e-line-1">
								{{info.contractAddress}}
							</view>
						</view>
						<view class="e-flex-1 e-p-l-30">
							<view class="e-font-24 e-m-b-8" style="color: rgba(255,255,255,0.6);">
								{{$t('digitIntegral.合约创建者')}}
							</view>
							<view class="c-white e-font-24 e-line-1">
								{{info.contractCreate}}
							</view>
						</view>
					</view>
					<view class="e-flex e-m-b-60">
						<view class="e-flex-1 e-p-r-10">
							<view class="e-font-24 e-m-b-8" style="color: rgba(255,255,255,0.6);">
								{{$t('digitIntegral.合约名称')}}
							</view>
							<view class="c-white e-font-24 e-line-1">
								{{info.contractName}}
							</view>
						</view>
						<view class="e-flex-1 e-p-l-10">
							<view class="e-font-24 e-m-b-8" style="color: rgba(255,255,255,0.6);">
								{{$t('digitIntegral.链ID')}}
							</view>
							<view class="c-white e-font-24 e-line-1">
								{{info.bizid}}
							</view>
						</view>
						<view class="e-flex-1 e-p-l-10">
							<view class="e-font-24 e-m-b-8" style="color: rgba(255,255,255,0.6);">
								{{$t('digitIntegral.合约类型')}}
							</view>
							<view class="c-white e-font-24 e-line-1">
								{{info.contractType}}
							</view>
						</view>
					</view>
				</view>
				<view class="bg-white e-p-l-20 e-p-r-20 e-p-b-20 e-p-t-40" style="margin-top: -40rpx;position: relative;z-index: 1">
					<view class="e-flex e-m-b-30" @tap="showParse = true">
						<view class="c-999 e-font-24 e-m-r-20">
							{{$t('digitIntegral.合约代码')}}
						</view>
						<view class="e-flex-1 e-line-1 e-p-r-20">
							<view class="c-333 e-m-b-10 e-font-24">
								{{info.contractCode}}
							</view>
						</view>
						<image class="img-28" src="./static/arrow.png" mode="" ></image>
						
					</view>
					<view class="e-flex" @tap="showIP = true">
						<view class="c-999 e-font-24 e-m-r-20">
							{{$t('digitIntegral.节点信息')}}
						</view>
						<view class="e-flex-1">
							<view class="c-333 e-font-24" v-for="item in info.nodeInformationTwo" :key="item.ip">
								{{item.ip}}
							</view>
						</view>
						<image class="img-28" src="./static/arrow.png" mode=""></image>
						
					</view>
				</view>
			</view>
			
			
			<view class="e-p-l-20 e-p-r-20">
				<view class="e-p-t-30 e-p-b-30 c-333 e-font-30 fw-500 e-flex">
					<view class="app-digit-integral__yline e-m-r-28">
						
					</view>
					<view class="">
						{{$t('digitIntegral.上链记录')}}({{total}})
					</view>
				</view>
				<view class="e-radius-20 app-digit-integral__item e-m-b-20 e-p-t-10 bg-white" v-for="item in list" :key="item.id" @tap="$goTo('/pages/digitIntegral/detail',{id:item.id})">
					<view class="app-digit-integral__item--box e-flex">
						<view class="e-p-l-20 e-flex-1 e-p-r-20">
							<view class="c-666 e-font-24 e-m-b-8">
								{{$t('digitIntegral.交易hash')}}
							</view>
							<view class="fw-500 e-font-28 c-333 e-line-1">
								{{item.hash}}
							</view>
						</view>
						<view class="e-p-l-20 e-flex-1 e-p-l-30 e-p-r-40">
							<view class="c-666 e-font-24 e-m-b-8">
								{{$t('digitIntegral.交易时间')}}
							</view>
							<view class="fw-500 e-font-28 c-333 e-line-1">
								{{$timeFormat(item.createTime,'yyyy-mm-dd hh:MM:ss')}}
							</view>
						</view>
						<image class="img-28" src="./static/arrow.png" mode=""></image>
					</view>
					<view class="e-flex e-p-20">
						<view class="e-flex-1">
							<view class="c-999 e-font-24">
								{{$t('digitIntegral.区块高度')}}
							</view>
							<view class="c-333 e-font-26 e-m-t-6">
								<text v-if="item.status === 1">{{getHeight(item.transactionJson)}}</text>
								<text v-else>-</text>
							</view>
						</view>
						<view class="e-flex-1">
							<view class="c-999 e-font-24">
								{{$t('digitIntegral.交易数量')}}
							</view>
							<view class="c-333 e-font-26 e-m-t-6">
								{{item.transNumber}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<load-more :showLoad="showLoad"></load-more>
		</view>
		<e-popup :show="showParse" mode="bottom" round="20rpx" @close="showParse=false" >
			<view class="app-digit-integral__parsepop">
				<image class="app-digit-integral__parsepop--close img-30 e-abso" :src="$staticPath('order/close.png')"
					@tap="showParse = false">
				</image>
				<view class="e-flex-xy-center e-p-30">
					<text class="c-333 e-font-36">{{$t('digitIntegral.合约代码')}}</text>
				</view>
				<view class="app-digit-integral__parsepop--content e-p-30">
					<e-parse :content="info.contractCode"></e-parse>
				</view>
			</view>
		</e-popup>
		<e-popup :show="showIP" mode="bottom" round="20rpx" @close="showIP=false">
			<view class="app-digit-integral__parsepop">
				<image class="app-digit-integral__parsepop--close img-30 e-abso" :src="$staticPath('order/close.png')"
					@tap="showIP = false">
				</image>
				<view class="e-flex-xy-center e-p-30">
					<text class="c-333 e-font-36">{{$t('digitIntegral.节点信息')}}</text>
				</view>
				<view class="app-digit-integral__parsepop--content">
					<view class="e-flex-y-center e-p-l-30 c-333 fw-500 e-font-30" :class="{'app-digit-integral__parsepop--item':(index+1)%2 !== 0,'app-digit-integral__parsepop--item1':(index+1)%2 === 0}" v-for="(item,index) in info.nodeInformationAll" :key="item.ip">
						· {{item.ip}}
					</view>
				</view>
			</view>
		</e-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref,watch } from 'vue'
	import { onLoad, onShow,onReachBottom } from '@dcloudio/uni-app';
	import {getCustomerContractFig,getTransactionDetailsList} from '@/common/request/api'
	import {
		useCurrentInstance,
		useQueryPage
	} from '@/common/hooks'
	import {
		useUser
	} from '@/common/stores'
	import {
		storeToRefs
	} from 'pinia'
	
	const {
		accountList
	} = storeToRefs(useUser())
	
	const ctx = useCurrentInstance()
	const info = ref({})
	const moneyAll = ref()
	const showParse = ref(false)
	const showIP = ref(false)
	const total= ref(0)

const { showLoad, list, handleQueryPage, handleRefresh } = useQueryPage({
	api: getTransactionDetailsList,
	option:{
		responseKey:'data.rows',
		totalKey:'data.total',
	}
});
	const getHeight = (json:any) => {
		if (json) {
			const obj = JSON.parse(json)
			return obj.blockNumber
		} else {
			return ''
		}
	}
	
	

	onLoad(opt => {
		if (opt.account) {
			accountList.value.some((item) => {
				if (item.strategy === opt.account) {
					moneyAll.value = item.frozenMoney
					console.log(item,'lll')
					return true
				}
			})
			getCustomerContractFig({strategy:opt.account}).then(res => {
				info.value = res.data
				let obj = ''
				obj = info.value.nodeInformation ? JSON.parse(info.value.nodeInformation) :''
				console.log(obj)
				if (obj) {
					info.value.nodeInformationAll = []
					info.value.nodeInformationTwo = obj.data.items[0].values.ChainNodes.slice(0,1)
					obj.data.items.forEach(item => {
						info.value.nodeInformationAll.push(...item.values.ChainNodes)
					})
				}
			})
		}
		if (opt.moneyAll) moneyAll.value = opt.moneyAll
		if (opt.id) {
			getCustomerContractFig({strategy:opt.id}).then(res => {
				info.value = res.data
				let obj = ''
				obj = info.value.nodeInformation ? JSON.parse(info.value.nodeInformation) :''
				console.log(obj)
				if (obj) {
					info.value.nodeInformationAll = []
					info.value.nodeInformationTwo = obj.data.items[0].values.ChainNodes.slice(0,1)
					obj.data.items.forEach(item => {
						info.value.nodeInformationAll.push(...item.values.ChainNodes)
					})
				}
			}) 
		}
		handleRefresh()
		getTransactionDetailsList({pageNum:1,pageSize:1}).then(res => {
			total.value = res.data.total
		})
	})
	onReachBottom(() => {
		handleQueryPage()
	})
</script>

<style lang="scss" scoped>
	.z-index-2 {
		position:relative;
		z-index: 22;
	}
	.status_bar {
		width: 100%;
		height: var(--status-bar-height);
	}
	.h-44 {
		height: 44px;
		box-sizing: border-box;
	}
	.e-font-64 {
		font-size:64rpx;
	}
	.e-radius-20 {
		overflow:hidden
	}
	.e-m-b-132 {
		margin-bottom: 132rpx;
	}
	.s_label {
		flex:0 0 160rpx;
		padding-left:20rpx
	}
	.fix-box {
		position: fixed;
		top: var(--status-bar-height);
		left: 0;
		width: 100vw;
		z-index: 999;
	}
	@include appBem_b(digit-integral) {
		@include appBem_e(bg) {
			width: 100vw;
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
		}
		@include appBem_e(yline) {
			width: 8rpx;
			height: 32rpx;
			background: #F56200;
			border-radius: 4rpx;
		}
		@include appBem_e(panelbgbox) {
			border-radius: 20rpx;
			width: 710rpx;
			height: 262rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			box-shadow: 0px 4rpx 20rpx 0px rgba(0,0,0,0.2);
		}
		@include appBem_e(panelbg) {
			width: 710rpx;
			height: 262rpx;
		}
		@include appBem_e(addr) {
			display: inline-block;
			padding: 8rpx 10rpx;
			background: rgba(255,255,255,0.88);
			border-radius: 10rpx;
			color: #E4423B;
		}
		@include appBem_e(addrl) {
			width: 100%;
			background: rgba(255,255,255,0.07);
			border: 2rpx solid;
			backdrop-filter: blur(4rpx);
			overflow: hidden;
		}
		@include appBem_e(addrs) {
			background: rgba(255,255,255,0.2);
			border-radius: 10rpx;
			padding:8rpx 10rpx
		}
		@include appBem_e(header) {
			height: 100rpx;
			background: linear-gradient( 180deg, #FFE5E4 0%, #FFFFFF 100%);
		}
		@include appBem_e(line) {
			border-bottom: 1rpx dashed #DDDDDD;
		}
		@include appBem_e(parsepop) {
			width: 100vw;
			height: 80vh;
			background-color: white;
			border-radius: 20rpx 20rpx 0 0;
			@include appBem_m(close) {
				top: 30rpx;
				right: 30rpx
			}
			@include appBem_m(content) {
				height: calc(80vh - 100rpx);
				overflow:auto;
			}
			@include appBem_m(item) {
				height: 100rpx;
				background: #F7F7F7;
			}
			@include appBem_m(item1) {
				height: 100rpx;
				background: #FFFFFF;
			}
		}
		@include appBem_e(item) {
			@include appBem_m(box) {
				padding: 10rpx 20rpx 20rpx 0;
				box-shadow: inset 0px -1rpx 0px 0px #F2F2F2;
			}
			@include appBem_m(line) {
				width: 4rpx;
				height: 60rpx;
				background: #E4423B;
				border-radius: 2rpx;
			}
			@include appBem_m(btn) {
				display: inline-block;
				padding:8rpx 22rpx;
				border-radius: 26rpx;
				border: 2px solid #EDCCCB;
			}
		}
	}
	.flex {
		display:flex
	}
	.e-p-t-120 {
		padding-top: 100rpx;
	}
</style>